<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  main{
    height: 100vh;
    transform-style: preserve-3d;
    transform: perspective(900px);
    transition: all 2s;
  }
  .main{
    transform:perspective(900px) rotateY(180deg);
  }
   div{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .5;
    font-size: 70px;
    backface-visibility:hidden;
   }
   div:nth-of-type(1){
    background-color: red;
   }
   div:nth-of-type(2){
    background-color:aqua;
    transform: rotateY(180deg);
   }
   nav{
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
   }
</style>
<body>
    <main>
      <div class="login">登录</div>
      <div class="register">注册</div>
    </main>
    <nav>
      <a href="#" onclick="change('login')">登录</a>
      <a href="#" onclick="change('register')">注册</a>
    </nav>
</body>
<script>
    const main=document.querySelector("main")
    function change(name){
      if(name=='login'){
        // main.style.transform='perspective(900px)';
        main.classList.remove("main");
      }else{
        // main.style.transform='perspective(900px) rotateY(180deg)'
        main.classList.add("main");
      }
    }
    
</script>
</html>
